import { FormRule, Image, PrimaryTableCol, Space, Tag } from 'tdesign-vue-next';

/**
 * 搜索表单项
 */
export const getSearchParams = () => [
  {
    label: '文章标题',
    key: 'title',
    hide: false,
  },
];

/**
 * 表格列
 */
export const getColumns = (): PrimaryTableCol[] => [
  {
    title: '文章标题',
    ellipsis: true,
    align: 'center',
    colKey: 'title',
  },
  {
    title: '封面图',
    align: 'center',
    colKey: 'cover',
    cell: (h, { row }) =>
      h(Image, { src: row.cover, fit: 'contain', style: 'width: 100px; height: 100px;margin: 0 auto' }),
  },
  {
    title: '文章简介',
    align: 'left',
    colKey: 'description',
    cell: (h, { row }) =>
      h(
        'div',
        {
          style: 'width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;',
        },
        row.description,
      ),
  },
  {
    title: '标签',
    ellipsis: true,
    align: 'center',
    colKey: 'tags',
    cell: (h, { row }) =>
      h(
        Space,
        {
          direction: 'vertical',
          size: 'small',
        },
        () => [
          row.tags.map((item: { value: string; label: string }) =>
            h(
              Tag,
              {
                key: item.value,
                size: 'small',
                theme: 'success',
                variant: 'light-outline',
              },
              () => item.label,
            ),
          ),
        ],
      ),
  },
];

/**
 * 表单校验规则
 */
export const getRules = (): Record<string, FormRule[]> => ({
  title: [{ required: true, message: '请输入文章标题', type: 'error', trigger: 'blur' }],
});
